<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title">烟云移动端注册</text>
    </view>
    <view class="login-form-content">
      <!-- 账号 -->
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <!-- 手机号 -->
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.phone" class="input" type="text" placeholder="请输入手机号" maxlength="30" />
      </view>
      <!-- 门店信息 -->
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.shopInfo" class="input" type="text" placeholder="请输入门店信息" maxlength="30" />
      </view>
      <!-- 门店联系人 -->
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.shopUser" class="input" type="text" placeholder="请输入门店联系人" maxlength="30" />
      </view>
      <!-- 用户类型 -->
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
          <uni-section type="line">
              <uni-data-select
                v-model="registerForm.shopType"
                :localdata="range"
                @change="change"
                :clear="false"
              ></uni-data-select>
          </uni-section>
      </view>
      <!-- 密码 -->
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.comfirmPassword" type="password" class="input" placeholder="请再次输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view  >
      </view>
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
      </view>
      <view class="action-btn">
        <button @click="handleRegister" class="register-btn cu-btn block bg-blue lg round">注册</button>
      </view>
    </view>
    
  </view>
</template>

<script>
  import { getCodeImg } from '@/api/login'
  import {checkModbile} from '@/utils/verify'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
        registerForm: {
          // username: "admin",
          // password: "admin123",
          username:"",
          phone:"",
          shopInfo:"",
          shopUser:"",
          shopType:"",
          password:"",
          comfirmPassword:"",
          code: "",
          uuid: ''
        },
        value: 0,
        range: [
          { value: 0, text: "请选择用户类型" },
          { value: 1, text: "经销商" },
          { value: 2, text: "修理厂" },
          { value: 3, text: "普通用户" },
        ],
      }
    },
    created() {
      this.getCode()
    },
    methods: {
      change(e) {
          console.log("e:", e);
      },
      // // 隐私协议
      // handlePrivacy() {
      //   let site = this.globalConfig.appInfo.agreements[0]
      //   this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      // },
      // // 用户协议
      // handleUserAgrement() {
      //   let site = this.globalConfig.appInfo.agreements[1]
      //   this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      // },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.registerForm.uuid = res.uuid
          }
        })
      },
      // 跳转登录
      async handleLogin() {
        this.$tab.navigateTo('/pages/login')
      },
      
      // 注册方法
      async handleRegister() {
        console.log("checkModbile(this.registerForm.phone)",checkModbile(this.registerForm.phone))
        if (this.registerForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.registerForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else if (this.registerForm.password != this.registerForm.comfirmPassword) {
          this.$modal.msgError("您输入的密码不一致")
        }  else if (this.registerForm.phone === "" ) {
          this.$modal.msgError("请输入您的手机号")
        } else if (!checkModbile(this.registerForm.phone)) {
          this.$modal.msgError("手机号格式错误")
        }  else if (this.registerForm.shopInfo === "") {
          this.$modal.msgError("请输入您的门店信息")
        }  else if (this.registerForm.shopUser === "") {
          this.$modal.msgError("请输入您的联系人")
        }  else if (this.registerForm.shopType === "" || this.registerForm.shopType === 0) {
          this.$modal.msgError("请选择您的用户类型")
        } else if (this.registerForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("注册中，请耐心等待...")
          this.pwdRegister()
        }
        // this.$tab.navigateTo('/pages/register')
      },
      // 注册
      async pwdRegister() {
        this.$store.dispatch('user/Register', this.registerForm).then(() => {
          this.$modal.closeLoading()
          this.registerSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 注册成功后，处理函数
      registerSuccess(result) {
        // // 设置用户信息
        // this.$store.dispatch('user/GetInfo').then(res => {
        //   this.$tab.reLaunch('/pages/index')
        // })
        let username = this.registerForm.username
        let password = this.registerForm.password
        this.$tab.navigateTo(`/pages/login?username=${username}`)
      }
    }
  }
</script>

<style lang="scss">
  @import '../static/style/register.scss'
</style>
